*{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

html{
	width: 100%;
	height: 100%;
	font-size: 20px;
	-webkit-text-size-adjust: none;
	font-family:"微软雅黑","Microsoft Yahei";
}



body{
	width: 100%;
	height: 100%;
	font-family:"微软雅黑","Microsoft Yahei";
	font-size: 20px;
	background: #6ccbea;
}

.body_move{
	background: #6ccbea;
}

.wrapper{
	width: 100%;
	height: 100%;
	background: #6ccbea;
	position: absolute;
	top: 0;
	left: 0;
	-webkit-transition: all 1s;
	-moz-transition: all 1s;
	-ms-transition: all 1s;
	-o-transition: all 1s;
	transition: all 1s;
	z-index: 300;
}

.wrapper_move{
	-webkit-transform: translateY(-100%);
	-moz-transform: translateY(-100%);
	-ms-transform: translateY(-100%);
	-o-transform: translateY(-100%);
	transform: translateY(-100%);
}

.container{
	width: 60rem;
	margin: 0 auto;
	height: 100%;
	padding-top: 1.25rem;
	overflow: hidden;
	position: relative;
}

.tv_wrapper{
	width: 46rem;
	height: 27.5rem;
	background: #989fa1;
	border: 0.7rem solid #040000;
	border-radius: 1.5rem;
	position: relative;
	float: left;
}

.tv_blank{
	width: 38rem;
	height: 24rem;
	border: 0.7rem solid #040000;
	border-radius: 1rem;
	margin: 1rem 0.5rem 0 1rem;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 600;
	overflow: hidden;
	display: none;
}

.tv_blank_up{
	width: 100%;
	height: 50%;
	background: #333;
	border-radius: 0.25rem 0.25rem 0 0;
	-webkit-transform: translateY(-100%);
	-moz-transform: translateY(-100%);
	-ms-transform: translateY(-100%);
	-o-transform: translateY(-100%);
	transform: translateY(-100%);
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-ms-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}

.tv_blank_down{
	width: 100%;
	height: 50%;
	background: #333;
	border-radius: 0 0 0.25rem 0.25rem;
	-webkit-transform: translateY(100%);
	-moz-transform: translateY(100%);
	-ms-transform: translateY(100%);
	-o-transform: translateY(100%);
	transform: translateY(100%);
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-ms-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}

.tv_blank_up_move,
.tv_blank_down_move{
	-webkit-transform: translateY(0);
	-moz-transform: translateY(0);
	-ms-transform: translateY(0);
	-o-transform: translateY(0);
	transform: translateY(0);
}


.tv_inner{
	width: 38rem;
	height: 24rem;
	background: #fff;
	border: 0.7rem solid #040000;
	border-radius: 1rem;
	margin: 1rem 0.5rem 0 1rem;
	float: left;
}

.tv_sound{
	width: 4.5rem;
	height: 8rem;
	float: left;
	overflow: hidden;
	margin-top: 7.5rem;
}

.tv_sound div{
	width: 1rem;
	height: 1rem;
	border-radius: 50%;
	float: left;
	background: #040000;
	margin: 0.5rem 0.25rem;
}

.tv_btn{
	width: 4.1rem;
	height: 4.1rem;
	background: #ef3636;
	border: 0.7rem solid #040000;
	border-radius: 50%;
	float: left;
	margin: 5rem 0 0 0.25rem;
	cursor: pointer;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-ms-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}

.tv_btn:hover{
	background: #dc4d23;
}

.tv_ps{
	width: 8.5rem;
	padding: 0.5rem;
	height: 3.5rem;
	position: absolute;
	bottom: 6rem;
	right: -1rem;
	opacity: 0;
	font-size: 0.8rem;
	background: #c3e5f0;
	border: 0.15rem solid #040000;
	border-radius: 0.5rem;
	text-align: center;
	-webkit-transition: all 0.8s;
	-moz-transition: all 0.8s;
	-ms-transition: all 0.8s;
	-o-transition: all 0.8s;
	transition: all 0.8s;
	z-index: 700;
}

.tv_ps_move{
	opacity: 1;
}


.tv_hand{
	width: 3.5rem;
	height: 3.5rem;
	background: url(../images/spite_80.png) no-repeat;
	background-size: 100% auto;
	background-position: 0 0;
	position: absolute;
	bottom: -1.25rem;
	right: -1.25rem;
	opacity: 0;
	-webkit-transform-origin: left top;
	-moz-transform-origin: left top;
	-ms-transform-origin: left top;
	-o-transform-origin: left top;
	transform-origin: left top;
}

.tv_hand_move{
	-webkit-animation: tv_hand_move 2s;
	-moz-animation: tv_hand_move 2s;
	-ms-animation: tv_hand_move 2s;
	-o-animation: tv_hand_move 2s;
	animation: tv_hand_move 2s;
}

@-webkit-keyframes tv_hand_move{
	0%,100%{opacity: 0;-webkit-transform:scale(1);bottom: -1.25rem;right: -1.25rem;}
	40%,60%{opacity: 1;-webkit-transform:scale(1);bottom: 0.6rem;right: 0;}
	50%{opacity: 1;-webkit-transform:scale(0.85);bottom: 0.6rem;right: 0;}
}


@-moz-keyframes tv_hand_move{
	0%,100%{opacity: 0;-moz-transform:scale(1);bottom: -1.25rem;right: -1.25rem;}
	40%,60%{opacity: 1;-moz-transform:scale(1);bottom: 0.6rem;right: 0;}
	50%{opacity: 1;-moz-transform:scale(0.85);bottom: 0.6rem;right: 0;}
}

@-ms-keyframes tv_hand_move{
	0%,100%{opacity: 0;-ms-transform:scale(1);bottom: -1.25rem;right: -1.25rem;}
	40%,60%{opacity: 1;-ms-transform:scale(1);bottom: 0.6rem;right: 0;}
	50%{opacity: 1;-ms-transform:scale(0.85);bottom: 0.6rem;right: 0;}
}

@-o-keyframes tv_hand_move{
	0%,100%{opacity: 0;-o-transform:scale(1);bottom: -1.25rem;right: -1.25rem;}
	40%,60%{opacity: 1;-o-transform:scale(1);bottom: 0.6rem;right: 0;}
	50%{opacity: 1;-o-transform:scale(0.85);bottom: 0.6rem;right: 0;}
}

@keyframes tv_hand_move{
	0%,100%{opacity: 0;transform:scale(1);bottom: -1.25rem;right: -1.25rem;}
	40%,60%{opacity: 1;transform:scale(1);bottom: 0.6rem;right: 0;}
	50%{opacity: 1;transform:scale(0.85);bottom: 0.6rem;right: 0;}
}


.tv_head{
	width: 4.2rem;
	height: 2.1rem;
	border-radius: 2.1rem 2.1rem 0 0;
	position: absolute;
	top: -2.1rem;
	left: 50%;
	margin-left: -2.1rem;
	background: #989fa1;
	border: 0.7rem solid #040000;
}

.tv_ante_1{
	width: 2.5rem;
	height: 0.7rem;
	border-radius: 0.7rem;
	background: #040000;
	position: absolute;
	top:-2.75rem;
	left: 20rem;
	-webkit-transform: rotate(35deg);
	-moz-transform: rotate(35deg);
	-ms-transform: rotate(35deg);
	-o-transform: rotate(35deg);
	transform: rotate(35deg);
}

.tv_ante_2{
	width: 3.5rem;
	height: 0.7rem;
	border-radius: 0.7rem;
	background: #040000;
	position: absolute;
	top:-3rem;
	left: 21.7rem;
	-webkit-transform: rotate(-35deg);
	-moz-transform: rotate(-35deg);
	-ms-transform: rotate(-35deg);
	-o-transform: rotate(-35deg);
	transform: rotate(-35deg);
}

/*闁儲甯堕崳锟*/

.control_wrapper{
	width: 12rem;
	height: 27.5rem;
	background: #d9dbdc;
	border: 0.7rem solid #040000;
	border-radius: 1.5rem;
	float: right;
}

.control_btn{
	width: 2.5rem;
	height: 2.5rem;
	border: 0.7rem solid #040000;
	border-radius: 50%;
	background: #ef3636;
	margin: 0.5rem;
	cursor: pointer;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-ms-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}

.control_btn:hover{
	background: #dc4d23;
}

.control_ul{
	width: 9rem;
	height: 7rem;
	overflow: hidden;
	margin: 0 auto;
}

.control_cats{
	width: 3.5rem;
	height: 2rem;
	border: 0.15rem solid #040000;
	background: #fff;
	border-radius: 0.3rem;
	color: #040000;
	font-size: 0.7rem;
	line-height: 1.7rem;
	text-align: center;
	margin: 0.5rem;
	float: left;
	list-style: none;
	cursor: pointer;
	-webkit-transition:all 0.3s;
	-moz-transition:all 0.3s;
	-ms-transition:all 0.3s;
	-o-transition:all 0.3s;
	transition:all 0.3s;
}

.cats_negative:hover{
	background: #c3e5f0;
}

.cats_active{
	background: #6ccbea;
}

.control_view{
	width: 8rem;
	height: 4rem;
	margin: 0 auto;
	border: 0.15rem dashed #040000;
	border-radius: 0.3rem;
	background: #fff;
	text-align: center;
	line-height: 3.7rem;
	cursor: pointer;
	font-size: 1rem;
	font-weight: 600;
	position: relative;
}

.control_view div{
	position: absolute;
}

.control_view .flash_1{
	width: 2rem;
	height: 2rem;
	top: -2.1rem;
	left: -1.9rem;
	background: url(../images/spite_80.png) no-repeat;
	background-size: 100% auto;
	background-position: 0 -36rem;
	-webkit-animation: flash_1 0.8s infinite;
	-moz-animation: flash_1 0.8s infinite;
	-ms-animation: flash_1 0.8s infinite;
	-o-animation: flash_1 0.8s infinite;
	animation: flash_1 0.8s infinite;
}

@-webkit-keyframes flash_1{
	0%,100%{-webkit-transform:scale(1);top:-2.1rem;left: -1.9rem;}
	50%{-webkit-transform:scale(1.1);top:-2.4rem;left: -2.2rem;}
}

@-moz-keyframes flash_1{
	0%,100%{-moz-transform:scale(1);top:-2.1rem;left: -1.9rem;}
	50%{-moz-transform:scale(1.1);top:-2.4rem;left: -2.2rem;}
}

@-ms-keyframes flash_1{
	0%,100%{-ms-transform:scale(1);top:-2.1rem;left: -1.9rem;}
	50%{-ms-transform:scale(1.1);top:-2.4rem;left: -2.2rem;}
}

@-o-keyframes flash_1{
	0%,100%{-o-transform:scale(1);top:-2.1rem;left: -1.9rem;}
	50%{-o-transform:scale(1.1);top:-2.4rem;left: -2.2rem;}
}

@keyframes flash_1{
	0%,100%{transform:scale(1);top:-2.1rem;left: -1.9rem;}
	50%{transform:scale(1.1);top:-2.4rem;left: -2.2rem;}
}



.control_view .flash_2{
	width: 1rem;
	height: 1rem;
	top: -0.55rem;
	left: -1.4rem;
	background: url(../images/spite_80.png) no-repeat;
	background-size: 100% auto;
	background-position: 0 -19rem;
	-webkit-animation: flash_2 0.8s infinite;
	-moz-animation: flash_2 0.8s infinite;
	-ms-animation: flash_2 0.8s infinite;
	-o-animation: flash_2 0.8s infinite;
	animation: flash_2 0.8s infinite;
}

@-webkit-keyframes flash_2{
	0%,100%{left: -1.4rem;}
	50%{left: -1.75rem;}
}

@-moz-keyframes flash_2{
	0%,100%{left: -1.4rem;}
	50%{left: -1.75rem;}
}

@-ms-keyframes flash_2{
	0%,100%{left: -1.4rem;}
	50%{left: -1.75rem;}
}

@-o-keyframes flash_2{
	0%,100%{left: -1.4rem;}
	50%{left: -1.75rem;}
}

@keyframes flash_2{
	0%,100%{left: -1.4rem;}
	50%{left: -1.75rem;}
}

.control_view .flash_3{
	width: 1rem;
	height: 1rem;
	background: url(../images/spite_80.png) no-repeat;
	background-size: 100% auto;
	background-position: 0 -18rem;
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	transform: rotate(180deg);
	bottom: -1rem;
	right: -1rem;
	-webkit-animation: flash_3 0.8s infinite;
	-moz-animation: flash_3 0.8s infinite;
	-ms-animation: flash_3 0.8s infinite;
	-o-animation: flash_3 0.8s infinite;
	animation: flash_3 0.8s infinite;
}

@-webkit-keyframes flash_3{
	0%,100%{bottom:-1rem;right: -1rem;}
	50%{bottom:-1.2rem;right: -1.2rem;}
}

@-moz-keyframes flash_3{
	0%,100%{bottom:-1rem;right: -1rem;}
	50%{bottom:-1.2rem;right: -1.2rem;}
}

@-ms-keyframes flash_3{
	0%,100%{bottom:-1rem;right: -1rem;}
	50%{bottom:-1.2rem;right: -1.2rem;}
}

@-o-keyframes flash_3{
	0%,100%{bottom:-1rem;right: -1rem;}
	50%{bottom:-1.2rem;right: -1.2rem;}
}

@keyframes flash_3{
	0%,100%{bottom:-1rem;right: -1rem;}
	50%{bottom:-1.2rem;right: -1.2rem;}
}

.control_view .flash_4{
	width: 1rem;
	height: 1rem;
	background: url(../images/spite_80.png) no-repeat;
	background-size: 100% auto;
	background-position: 0 -19rem;
	-webkit-transform: rotate(-80deg);
	-moz-transform: rotate(-80deg);
	-ms-transform: rotate(-80deg);
	-o-transform: rotate(-80deg);
	transform: rotate(-80deg);
	bottom: -1.1rem;
	right: -0.35rem;
	-webkit-animation: flash_4 0.8s infinite;
	-moz-animation: flash_4 0.8s infinite;
	-ms-animation: flash_4 0.8s infinite;
	-o-animation: flash_4 0.8s infinite;
	animation: flash_4 0.8s infinite;
}

@-webkit-keyframes flash_4{
	0%,100%{bottom:-1.1rem;}
	50%{bottom:-1.35rem;}
}

@-moz-keyframes flash_4{
	0%,100%{bottom:-1.1rem;}
	50%{bottom:-1.35rem;}
}

@-ms-keyframes flash_4{
	0%,100%{bottom:-1.1rem;}
	50%{bottom:-1.35rem;}
}

@-o-keyframes flash_4{
	0%,100%{bottom:-1.1rem;}
	50%{bottom:-1.35rem;}
}

@keyframes flash_4{
	0%,100%{bottom:-1.1rem;}
	50%{bottom:-1.35rem;}
}

.contact{
	width: 8rem;
	margin: 1.5rem auto 0;
	position: relative;
}

.contact h3, .works{
	width: 8rem;
	height: 2rem;
	margin: 0.75rem auto;
	border: 0.15rem solid #040000;
	border-radius: 0.3rem;
	background: #fff;
	text-align: center;
	font-size: 0.7rem;
	line-height: 1.7rem;
	color: #040000;
	font-weight: 400;
	clear: both;
}

.contact_info{
	width: 8rem;
	height: 4rem;
	overflow: hidden;
}

.contact_box{
	display: block;
	list-style: none;
	height: 2rem;
}

.contact_box i{
	display: inline-block;
	width: 1rem;
	height: 1rem;
	margin-right: 0.25rem;
	float: left;
}

.contact_box .contact_qq{
	background: url(../images/spite_80.png) no-repeat;
	background-size: 100% auto;
	background-position: 0 -13rem;
}

.contact_box .contact_email{
	background: url(../images/spite_80.png) no-repeat;
	background-size: 100% auto;
	background-position: 0 -15rem;
}

.contact_box p{
	float: left;
	font-size: 0.65rem;
	line-height: 1rem;
}

.works{
	margin: 0 auto;
	cursor: pointer;
}

.my_download{
	display: block;
	text-decoration: none;
	width: 2rem;
	height: 2rem;
	border: 0.15rem solid #040000;
	border-radius: 1rem;
	background: yellow;
	position: absolute;
	top: 1rem;
	left: 52rem;
	overflow: hidden;
	font-size: 0.8rem;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-ms-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
	cursor: pointer;
	color: #040000;
}

.my_download:hover{
	width: 8rem;
}

.my_download i{
	display: inline-block;
	width: 1rem;
	height: 1rem;
	background: url(../images/spite_80.png) no-repeat;
	background-size: 100% auto;
	background-position: 0 -1rem;
	margin: 0.35rem;
	float: left;
}

.my_download span{
	line-height: 1.7rem;
	color:#333;
}

/*娑擃亙姹夌挧鍕灐*/

.personal_info{
	width: 100%;
	height: 100%;
	position: relative;
}

.my_photo{
	width: 7.8rem;
	height: 7.8rem;
	border-radius: 50%;
	border: 0.15rem solid #040000;
	position: relative;
	position: absolute;
	top: 0.5rem;
	left: 50%;
	margin-left: -3.9rem;
	z-index: 30;
	-webkit-transition: all 0.8s;
	-moz-transition: all 0.8s;
	-ms-transition: all 0.8s;
	-o-transition: all 0.8s;
	transition: all 0.8s;
}

.my_photo_move{
	width: 7.8rem;
	height: 7.8rem;
	border-radius: 50%;
	border: 0.15rem solid #040000;
	position: relative;
	position: absolute;
	top: 0.5rem;
	left: 1rem;
	margin-left: 0rem;
	z-index: 30;
	-webkit-transform: scale(0.7);
	-moz-transform: scale(0.7);
	-ms-transform: scale(0.7);
	-o-transform: scale(0.7);
	transform: scale(0.7);
}

.my_photo .my_photo_img{
	width: 7.5rem;
	height: 7.5rem;
	border-radius: 50%;
	background: url(../images/spite_200.png) no-repeat;
	background-size: 100% auto;
	background-position: 0 0;
}

.my_pic_box{
	position: absolute;
	width: 7.5rem;
	height: 7.5rem;
	border-radius: 50%;
	top: 0;
	left: 0;
}

.my_pic_box .my_pic{
	width: 7.5rem;
	height: 7.5rem;
	border-radius: 50%;
	background: #c3e5f0 url(../images/spite_200.png) no-repeat;
	background-size: 100% auto;
	background-position: 0 -7.25rem;
	border: 0.15rem solid #040000;
	-webkit-transition: all 1s;
	-moz-transition: all 1s;
	-ms-transition: all 1s;
	-o-transition: all 1s;
	transition: all 1s;
	-webkit-transform-origin: 0.8rem 50%;
	-moz-transform-origin: 0.8rem 50%;
	-ms-transform-origin: 0.8rem 50%;
	-o-transform-origin: 0.8rem 50%;
	transform-origin: 0.8rem 50%;
}

.pic_ding{
	position: absolute;
	width: 0.4rem;
	height: 0.4rem;
	border-radius: 50%;
	top: 50%;
	margin-top: -0.2rem;
	left: 0.4rem;
	background: #040000;
}

.my_photo:hover>div>div.my_pic{
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	transform: rotate(90deg);
}

.my_name_box{
	width: 9rem;
	height: 1.8rem;
	margin: 0.5rem auto;
	background: #6ccbea;
	border: 0.15rem solid #040000;
	text-align: center;
	font-size: 0.9rem;
	line-height: 1.5rem;
	position: absolute;
	top: 8.4rem;
	left: 50%;
	margin-left: -4.5rem;
	z-index: 20;
	-webkit-transition: all 0.8s;
	-moz-transition: all 0.8s;
	-ms-transition: all 0.8s;
	-o-transition: all 0.8s;
	transition: all 0.8s;
}

.my_name_box_move{
	position: absolute;
	top: 7rem;
	left: 0.5rem;
	margin-left: 0;
	z-index: 20;
	-webkit-transform: scale(0.8);
	-moz-transform: scale(0.8);
	-ms-transform: scale(0.8);
	-o-transform: scale(0.8);
	transform: scale(0.8);
}

.my_icon_box{
	width: 34rem;
	height: 16rem;
	overflow: hidden;
	margin: 0 auto;
	padding-top: 11.5rem;
}

.icon_school,
.icon_grade,
.icon_location,
.icon_job{
	width: 4rem;
	height: 4rem;
	float: left;
	margin: 0 2.25rem;
}

.icon_school{
	background: url(../images/spite_80.png) no-repeat;
	background-size: 100% auto;
	background-position: 0 -8rem;
}

.icon_grade{
	background: url(../images/spite_80.png) no-repeat;
	background-size: 100% auto;
	background-position: 0 -12rem;
}

.icon_location{
	background: url(../images/spite_80.png) no-repeat;
	background-size: 100% auto;
	background-position: 0 -16rem;
}

.icon_job{
	background: url(../images/spite_80.png) no-repeat;
	background-size: 100% auto;
	background-position: 0 -20rem;
}

.tap_1,
.tap_2,
.tap_3,
.tap_4{
	width: 7.5rem;
	height: 1.8rem;
	background: #fff;
	border: 0.15rem solid #040000;
	text-align: center;
	font-size: 0.8rem;
	line-height: 1.5rem;
	position: absolute;
	top: 16rem;
	overflow: hidden;
	-webkit-transition: all 0.8s;
	-moz-transition: all 0.8s;
	-ms-transition: all 0.8s;
	-o-transition: all 0.8s;
	transition: all 0.8s;
}

.tap_1{
	left: 1.75rem;
}

.tap_2{
	left: 10.25rem;
}

.tap_3{
	left: 18.75rem;
}

.tap_4{
	left: 27rem;
}

.tap_1_move{
	position: absolute;
	left: 1.15rem;
	top: 10rem;
	-webkit-transform: scale(0.8);
	-moz-transform: scale(0.8);
	-ms-transform: scale(0.8);
	-o-transform: scale(0.8);
	transform: scale(0.8);
}

.tap_2_move{
	position: absolute;
	left: 1.15rem;
	top: 12rem;
	-webkit-transform: scale(0.8);
	-moz-transform: scale(0.8);
	-ms-transform: scale(0.8);
	-o-transform: scale(0.8);
	transform: scale(0.8);
}

.tap_3_move{
	position: absolute;
	left: 1.15rem;
	top: 14rem;
	-webkit-transform: scale(0.8);
	-moz-transform: scale(0.8);
	-ms-transform: scale(0.8);
	-o-transform: scale(0.8);
	transform: scale(0.8);
}

.tap_4_move{
	position: absolute;
	left: 1.15rem;
	top: 16rem;
	-webkit-transform: scale(0.8);
	-moz-transform: scale(0.8);
	-ms-transform: scale(0.8);
	-o-transform: scale(0.8);
	transform: scale(0.8);
}

.tap_1 p,
.tap_2 p,
.tap_3 p,
.tap_4 p{
	color: #333;
	-webkit-transition: all 0.8s;
	-moz-transition: all 0.8s;
	-ms-transition: all 0.8s;
	-o-transition: all 0.8s;
	transition: all 0.8s;
}

.tap_1:hover>p,
.tap_2:hover>p,
.tap_3:hover>p,
.tap_4:hover>p{
	-webkit-transform: translateY(-1.5rem);
	-moz-transform: translateY(-1.5rem);
	-ms-transform: translateY(-1.5rem);
	-o-transform: translateY(-1.5rem);
	transform: translateY(-1.5rem);
}

.hover_me{
	position: absolute;
	top: 3.5rem;
	right: 2rem;
	width: 12rem;
	height: 1.5rem;
	background: #c3e5f0;
	text-align: center;
	line-height: 1.5rem;
	opacity: 0;
	display: none;
	font-size: 0.8rem;
}

.hover_me_move{
	-webkit-animation: hover_me 3s infinite;
	-moz-animation: hover_me 3s infinite;
	-ms-animation: hover_me 3s infinite;
	-o-animation: hover_me 3s infinite;
	animation: hover_me 3s infinite;
}

@-webkit-keyframes hover_me{
	0%,100%{opacity: 0;}
	30%,70%{opacity: 1;}
}

@-moz-keyframes hover_me{
	0%,100%{opacity: 0;}
	30%,70%{opacity: 1;}
}

@-ms-keyframes hover_me{
	0%,100%{opacity: 0;}
	30%,70%{opacity: 1;}
}

@-o-keyframes hover_me{
	0%,100%{opacity: 0;}
	30%,70%{opacity: 1;}
}

@keyframes hover_me{
	0%,100%{opacity: 0;}
	30%,70%{opacity: 1;}
}

/*閹哄本褰欓幎鈧懗锟*/
.my_skill{
	width: 25rem;
	height: 20rem;
	position: absolute;
	top: 2.25rem;
	left: 10.25rem;
	display: none;
}

.my_skill_cont{
	width: 25rem;
	height: 20rem;
	padding-top: 2.5rem;
	padding-left: 5rem;
}

.my_skill_row{
	width: 15rem;
	height: 1.75rem;
	margin-bottom: 0.75rem;
	overflow: hidden;
}

.my_skill_row div{
	border: 0.15rem solid #040000;
	float: left;
	color: #333;
	font-weight: 600;
	line-height: 1.45rem;
	text-align: center;
	opacity: 0;
	font-size: 0.8rem;
}

.my_skill_row .my_skill_move{
	opacity: 1;
}

.html5{
	width: 5rem;
	margin-right: 0.75rem;
	background-color: #fafcfe;
	-webkit-transition: all 1s 1.2s;
	-moz-transition: all 1s 1.2s;
	-ms-transition: all 1s 1.2s;
	-o-transition: all 1s 1.2s;
	transition: all 1s 1.2s;
}

.css3{
	width: 9.25rem;
	background-color: #fafcfe;
	-webkit-transition: all 2s 0.8s;
	-moz-transition: all 2s 0.8s;
	-ms-transition: all 2s 0.8s;
	-o-transition: all 2s 0.8s;
	transition: all 2s 0.8s;
}

.html{
	width: 9rem;
	margin-right: 0.75rem;
	background: #ec6b46;
	-webkit-transition: all 2s;
	-moz-transition: all 2s;
	-ms-transition: all 2s;
	-o-transition: all 2s;
	transition: all 2s;
}

.mongodb{
	width: 5.25rem;
	background: #ec6b46;
	-webkit-transition: all 2s 0.8s;
	-moz-transition: all 2s 0.8s;
	-ms-transition: all 2s 0.8s;
	-o-transition: all 2s 0.8s;
	transition: all 2s 0.8s;
}

.js{
	width: 6.75rem;
	margin-right: 0.75rem;
	background: #ec6b46;
	-webkit-transition: all 1.8s 1.2s;
	-moz-transition: all 1.8s 1.2s;
	-ms-transition: all 1.8s 1.2s;
	-o-transition: all 1.8s 1.2s;
	transition: all 1.8s 1.2s;
}

.bootstrap{
	width: 7.5rem;
	background-color: #fafcfe;
	-webkit-transition: all 2s 1.5s;
	-moz-transition: all 2s 1.5s;
	-ms-transition: all 2s 1.5s;
	-o-transition: all 2s 1.5s;
	transition: all 2s 1.5s;
}

.ajax{
	width: 5rem;
	margin-right: 0.75rem;
	background-color: #fafcfe;
	-webkit-transition: all 1.4s 0.9s;
	-moz-transition: all 1.4s 0.9s;
	-ms-transition: all 1.4s 0.9s;
	-o-transition: all 1.4s 0.9s;
	transition: all 1.4s 0.9s;
}

.jquery{
	width: 4rem;
	margin-right: 0.75rem;
	background-color: #f57a44;
	-webkit-transition: all 1.8s 0.7s;
	-moz-transition: all 1.8s 0.7s;
	-ms-transition: all 1.8s 0.7s;
	-o-transition: all 1.8s 0.7s;
	transition: all 1.8s 0.7s;
}

.AngularJs{
	width: 4.5rem;
	background-color: #fafcfe;
	-webkit-transition: all 1.5s 2s;
	-moz-transition: all 1.5s 2s;
	-ms-transition: all 1.5s 2s;
	-o-transition: all 1.5s 2s;
	transition: all 1.5s 2s;
}

.ps{
	width: 10rem;
	margin-right: 0.75rem;
	background: #ec6b46;
	-webkit-transition: all 2s 1.1s;
	-moz-transition: all 2s 1.1s;
	-ms-transition: all 2s 1.1s;
	-o-transition: all 2s 1.1s;
	transition: all 2s 1.1s;
}

.node{
	width: 4.25rem;
	background-color: #fafcfe;
	-webkit-transition: all 1.5s 1s;
	-moz-transition: all 1.5s 1s;
	-ms-transition: all 1.5s 1s;
	-o-transition: all 1.5s 1s;
	transition: all 1.5s 1s;
}

.sass{
	width: 3.25rem;
	margin-right: 0.75rem;
	background-color: #fafcfe;
	-webkit-transition: all 1.4s 1.4s;
	-moz-transition: all 1.4s 1.4s;
	-ms-transition: all 1.4s 1.4s;
	-o-transition: all 1.4s 1.4s;
	transition: all 1.4s 1.4s;
}

.SVN{
	width: 11rem;
	background-color: #f57a44;
	-webkit-transition: all 2.2s 1.2s;
	-moz-transition: all 2.2s 1.2s;
	-ms-transition: all 2.2s 1.2s;
	-o-transition: all 2.2s 1.2s;
	transition: all 2.2s 1.2s;
}


/*閸撳秶顏圭偘绡*/
.my_intern{
	width: 25rem;
	height: 20rem;
	position: absolute;
	top: 0.25rem;
	left: 10.25rem;
	display: none;
}

.my_intern_cont{
	width: 25rem;
	height: 20rem;
	opacity: 0;
	-webkit-transform: translateY(3rem);
	-moz-transform: translateY(3rem);
	-ms-transform: translateY(3rem);
	-o-transform: translateY(3rem);
	transform: translateY(3rem);
}

.my_intern_cont_move{
	opacity: 1;
	-webkit-transform: translateY(0);
	-moz-transform: translateY(0);
	-ms-transform: translateY(0);
	-o-transform: translateY(0);
	transform: translateY(0);
	-webkit-transition: all 0.5s 0.6s ease-out;
	-moz-transition: all 0.5s 0.6s ease-out;
	-ms-transition: all 0.5s 0.6s ease-out;
	-o-transition: all 0.5s 0.6s ease-out;
	transition: all 0.5s 0.8s ease-out;
}

.my_intern_title{
	width: 100%;
	font-size: 1.25rem;
	line-height: 2.5rem;
	color: #ec6b46;
	text-align: center;
}

.my_intern_comp{
	width: 100%;
	font-size: 0.8rem;
	line-height: 1.2rem;
	color: #ec6b46;
	text-align: center;
}

.my_intern_time{
	display: block;
	width: 100%;
	font-size: 0.8rem;
	line-height: 1.2rem;
	color: #333;
	text-align: center;
	margin-bottom: 0.75rem;
}

.my_intern_item{
	width: 24rem;
	font-size: 0.8rem;
	line-height: 1rem;
	margin: 0.5rem 0 0.5rem 1rem;
	list-style-type: decimal;
}

/*閸忔湹绮紒蹇撳坊*/
.my_exp{
	width: 25rem;
	height: 20rem;
	position: absolute;
	top: 2.25rem;
	left: 10.25rem;
	display: none;
}

.my_exp_box{
	width: 100%;
	overflow: hidden;
	border-bottom: 0.15rem dashed #ec6b46;
	opacity: 0;
}

.my_exp_box_1_move{
	opacity: 1;
	-webkit-transition: all 0.8s 0.5s;
	-moz-transition: all 0.8s 0.5s;
	-ms-transition: all 0.8s 0.5s;
	-o-transition: all 0.8s 0.5s;
	transition: all 0.8s 0.5s;
}

.my_exp_box_2_move{
	opacity: 1;
	-webkit-transition: all 0.8s 1s;
	-moz-transition: all 0.8s 1s;
	-ms-transition: all 0.8s 1s;
	-o-transition: all 0.8s 1s;
	transition: all 0.8s 1s;
}

.my_exp_box_3_move{
	opacity: 1;
	-webkit-transition: all 0.8s 1.5s;
	-moz-transition: all 0.8s 1.5s;
	-ms-transition: all 0.8s 1.5s;
	-o-transition: all 0.8s 1.5s;
	transition: all 0.8s 1.5s;
}
.my_exp_box_title{
	width: 5rem;
	height: 4.5rem;
	margin-top: 1rem;
	text-align: center;
	float: left;
	font-size: 1rem;
	color: #ec6b46;
	font-weight: 600;
}

.my_exp_box_info{
	width: 19rem;
	margin-left: 1rem;
	margin-top: 0.25rem;
	float: left;
}

.my_exp_box_item{
	font-size: 0.7rem;
	line-height: 0.9rem;
	list-style-type: decimal;
}

.my_exp_box_others{
	width: 20rem;
	margin-top: 0.25rem;
	float: left;
	overflow: hidden;
}

.my_exp_box_license{
	width: 4rem;
	float: left;
	margin-top: 0.5rem;
	height: 4.5rem;
}

.my_exp_box_license p{
	width: 4rem;
	font-size: 0.6rem;
	text-align: center;
}

.icon_gpa{
	display: block;
	width: 2.5rem;
	height: 2.5rem;
	background: url(../images/spite_80.png) no-repeat;
	background-size: 100% auto;
	background-position: 0 -15rem;
	margin: 0 auto;
}

.icon_en{
	display: block;
	width: 2.5rem;
	height: 2.5rem;
	background: url(../images/spite_80.png) no-repeat;
	background-size: 100% auto;
	background-position: 0 -17.5rem;
	margin: 0 auto;
}

.icon_kuaiji{
	display: block;
	width: 2.5rem;
	height: 2.5rem;
	background: url(../images/spite_80.png) no-repeat;
	background-size: 100% auto;
	background-position: 0 -20rem;
	margin: 0 auto;
}

.icon_zhengquan{
	display: block;
	width: 2.5rem;
	height: 2.5rem;
	background: url(../images/spite_80.png) no-repeat;
	background-size: 100% auto;
	background-position: 0 -22.5rem;
	margin: 0 auto;
}

.icon_pc{
	display: block;
	width: 2.5rem;
	height: 2.5rem;
	background: url(../images/spite_80.png) no-repeat;
	background-size: 100% auto;
	background-position: 0 -25rem;
	margin: 0 auto;
}

/*娑撯偓闁款噣娼扮拠鏇炲隘*/
.view{
	width: 100%;
	height: 100%;
	background: #c3e5f0;
	position: absolute;
	top: 0;
	left: 0;
	-webkit-transition: all 1s;
	-moz-transition: all 1s;
	-ms-transition: all 1s;
	-o-transition: all 1s;
	transition: all 1s;
	z-index: 400;
	display: none;
}

.view_wrapper{
	width: 60rem;
	height: 100%;
	margin: 0 auto;
	position: relative;
}

.my_pic_work{
	width: 10rem;
	height: 10rem;
	position: absolute;
	top: 50%;
	margin-top: -5rem;
	left: 50%;
	margin-left: -5rem;
	z-index: 430;
	-webkit-transition:all 0.8s;
	-moz-transition:all 0.8s;
	-ms-transition:all 0.8s;
	-o-transition:all 0.8s;
	transition:all 0.8s;
}

.my_pic_work_move{
	top: 50%;
	margin-top: -5rem;
	left: 0;
	margin-left: 0;
}

.my_pic_work .my_pic_work_img{
	width: 100%;
	height: 100%;
	background: url(../images/spite_200.png) no-repeat;
	background-size: 100% auto;
	background-position: 0 -20rem;
}

.welcome_work{
	width: 17.5rem;
	height: 2rem;
	line-height: 2rem;
	font-size: 1.5rem;
	font-weight: 600;
	position: absolute;
	top: 50%;
	margin-top: 5rem;
	left:50%;
	margin-left: -8.75rem;
	z-index: 450;
	overflow: hidden;
}

.welcome_work_p{
	width: 0rem;
	-webkit-transition: all 1.5s linear;
	-moz-transition: all 1.5s linear;
	-ms-transition: all 1.5s linear;
	-o-transition: all 1.5s linear;
	transition: all 1.5s linear;
}

.welcome_work_p_move{
	width: 20rem;
}

.q_list{
	width: 16rem;
	height: 2rem;
	position: absolute;
	border-radius: 1rem;
	top: 50%;
	margin-top:3.5rem;
	left: 8.5rem;
	-webkit-transform-origin: -7.5rem 1rem;
	-moz-transform-origin: -7.5rem 1rem;
	-ms-transform-origin: -7.5rem 1rem;
	-o-transform-origin: -7.5rem 1rem;
	transform-origin: -7.5rem 1rem;
	-webkit-transform:rotate(-60deg);
	-moz-transform:rotate(-60deg);
	-ms-transform:rotate(-60deg);
	-o-transform:rotate(-60deg);
	transform:rotate(-60deg);
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-ms-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
	z-index: 420;
	opacity: 0;
	overflow: visible;
}

.q_list_move{
	top: 50%;
	margin-top:-1rem;
	left: 12.5rem;
	opacity: 1;
	overflow: visible;
}

.q_list_1{
	width: 12rem;
	z-index: 420;
}

.q_list_2{
	width: 13.5rem;
	z-index: 419;
}

.q_list_3{
	width: 16rem;
	z-index: 418;
}

.q_list_4{
	width: 13.5rem;
	z-index: 417;
}

.q_list_5{
	width: 9.5rem;
	z-index: 416;
}

.q_list_1_move{
	-webkit-transform:rotate(-60deg);
	-moz-transform:rotate(-60deg);
	-ms-transform:rotate(-60deg);
	-o-transform:rotate(-60deg);
	transform:rotate(-60deg);
}

.q_list_2_move{
	-webkit-transform:rotate(-30deg);
	-moz-transform:rotate(-30deg);
	-ms-transform:rotate(-30deg);
	-o-transform:rotate(-30deg);
	transform:rotate(-30deg);
}

.q_list_3_move{
	-webkit-transform:rotate(0deg);
	-moz-transform:rotate(0deg);
	-ms-transform:rotate(0deg);
	-o-transform:rotate(0deg);
	transform:rotate(0deg);
}

.q_list_4_move{
	-webkit-transform:rotate(30deg);
	-moz-transform:rotate(30deg);
	-ms-transform:rotate(30deg);
	-o-transform:rotate(30deg);
	transform:rotate(30deg);
}

.q_list_5_move{
	-webkit-transform:rotate(60deg);
	-moz-transform:rotate(60deg);
	-ms-transform:rotate(60deg);
	-o-transform:rotate(60deg);
	transform:rotate(60deg);
}

.q_list .q_list_num{
	width: auto;
	height: 2rem;
	overflow: hidden;
	border-radius: 1rem;
	-wekbkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
	-ms-transition: all 0.2s;
	-o-transition: all 0.2s;
	transition: all 0.2s;
	-webkit-transform-origin: 1rem 1rem;
	-moz-transform-origin: 1rem 1rem;
	-ms-transform-origin: 1rem 1rem;
	-o-transform-origin: 1rem 1rem;
	transform-origin: 1rem 1rem;
}

.q_list_1 .q_list_num{
	-webkit-transform: rotate(60deg);
	-moz-transform: rotate(60deg);
	-ms-transform: rotate(60deg);
	-o-transform: rotate(60deg);
	transform: rotate(60deg);

}
.q_list_2 .q_list_num{
	-webkit-transform: rotate(30deg);
	-moz-transform: rotate(30deg);
	-ms-transform: rotate(30deg);
	-o-transform: rotate(30deg);
	transform: rotate(30deg);
}

.q_list_3 .q_list_num{
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
}

.q_list_4 .q_list_num{
	-webkit-transform: rotate(-30deg);
	-moz-transform: rotate(-30deg);
	-ms-transform: rotate(-30deg);
	-o-transform: rotate(-30deg);
	transform: rotate(-30deg);
}

.q_list_5 .q_list_num{
	-webkit-transform: rotate(-60deg);
	-moz-transform: rotate(-60deg);
	-ms-transform: rotate(-60deg);
	-o-transform: rotate(-60deg);
	transform: rotate(-60deg);
}

.q_list_1_move .q_list_num:hover,
.q_list_2_move .q_list_num:hover,
.q_list_3_move .q_list_num:hover,
.q_list_4_move .q_list_num:hover,
.q_list_5_move .q_list_num:hover{
	cursor: pointer;
	box-shadow: 0 0 0.5rem #000;
}

.q_list_num span{
	width: 2rem;
	height: 2rem;
	border: 0.15rem solid #040000;
	border-radius: 1rem;
	float: left;
	background: #ec6b46;
	text-align: center;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.7rem;
	margin-right: 0.5rem;
}

.q_list_cont{
	width: auto;
	font-size: 0.8rem;
	line-height: 2rem;
	font-weight: 600;
	display: none;
}

.my_a_box{
	width: 25rem;
	height: 20rem;
	border: 0.15rem solid #040000;
	background: #fcfcfc;
	border-radius: 0.5rem;
	position: absolute;
	top:50%;
	margin-top: -10rem;
	right:50%;
	margin-right: -12.5rem;
	font-size: 0.8rem;
	line-height: 2.7rem;
	text-align: center;
	-webkit-transition: all 0.8s;
	-moz-transition: all 0.8s;
	-ms-transition: all 0.8s;
	-o-transition: all 0.8s;
	transition: all 0.8s;
}

.my_a_box_move{
	top:50%;
	margin-top: -10rem;
	right:0;
	margin-right: 0;
}

.a_pre{
	width: 100%;
	height: 100%;
	line-height: 19.7rem;
	opacity: 0;
}

.a_pre_move{
	opacity: 1;
	-webkit-transition: all 1s 1s;
	-moz-transition: all 1s 1s;
	-ms-transition: all 1s 1s;
	-o-transition: all 1s 1s;
	transition: all 1s 1s;
}

.a_1,
.a_2,
.a_3,
.a_4,
.a_5{
	width: 100%;
	height: 100%;
	padding-top: 1rem;
	display: none;
}

.a_1_p,
.a_2_p,
.a_3_p,
.a_4_p,
.a_5_p{
	font-size: 0.9rem;
	color: #333;
	line-height: 2rem;
	opacity: 0;
	-webkit-transform: translateY(0.5rem);
	-moz-transform: translateY(0.5rem);
	-ms-transform: translateY(0.5rem);
	-o-transform: translateY(0.5rem);
	transform: translateY(0.5rem);
}

.a_3_p span{
	color: #ec6b46;
	font-weight: 600;
}

.a_2_img{
	margin-top: 0.5rem;
	width: 12.5rem;
	margin-left: 6.25rem;
	height: 7rem;
	background: url(../images/spite_600.png) no-repeat;
	background-size: 100% auto;
	background-position: 0 0;
	opacity: 0;
}

.a_2_img_show{
	opacity: 1;
	-webkit-transition: all 1s 4s;
	-moz-transition: all 1s 4s;
	-ms-transition: all 1s 4s;
	-o-transition: all 1s 4s;
	transition: all 1s 4s;
}

.a_2_img_img{
	width: 100%;
	height: 100%;
	display: block;
	opacity: 0;
	background: url(../images/spite_600.png) no-repeat;
	background-size: 100% auto;
	background-position: 0 -12.5rem;
	-webkit-transition: all 3s 5s linear;
	-moz-transition: all 3s 5s linear;
	-ms-transition: all 3s 5s linear;
	-o-transition: all 3s 5s linear;
	transition: all 3s 5s linear;
}

.a_2_img_img_move{
	opacity: 1;
}

.a_4_img_cry{
	width: 2rem;
	height: 2rem;
	background: url(../images/spite_80.png) no-repeat;
	background-size: 100% auto;
	background-position: 0 -22rem;
	margin-left: 17.5rem;
	opacity: 0;
}

.a_4_img_cry_move{
	opacity: 1;
	-webkit-transition: all 0.8s 2s;
	-moz-transition: all 0.8s 2s;
	-ms-transition: all 0.8s 2s;
	-o-transition: all 0.8s 2s;
	transition: all 0.8s 2s;
}

.a_4_img_flash{
	width: 3rem;
	height: 3rem;
	background: url(../images/spite_80.png) no-repeat;
	background-size: 100% auto;
	background-position: 0 -36rem;
	margin-left: 5rem;
	margin-top: -2rem;
	opacity: 0;
}

.a_4_img_flash_move{
	-webkit-animation: a_4_img_flash_move 0.8s 5.5s infinite;
	-moz-animation: a_4_img_flash_move 0.8s 5.5s infinite;
	-ms-animation: a_4_img_flash_move 0.8s 5.5s infinite;
	-o-animation: a_4_img_flash_move 0.8s 5.5s infinite;
	animation: a_4_img_flash_move 0.8s 5.5s infinite;
}

@keyframes a_4_img_flash_move{
	0%,100%{opacity: 0;transform:scale(1);}
	50%{opacity: 1;transform:scale(1.1);}
}

@-webkit-keyframes a_4_img_flash_move{
	0%,100%{opacity: 0;-webkit-transform:scale(1);}
	50%{opacity: 1;-webkit-transform:scale(1.1);}
}

@-moz-keyframes a_4_img_flash_move{
	0%,100%{opacity: 0;-moz-transform:scale(1);}
	50%{opacity: 1;-moz-transform:scale(1.1);}
}

@-ms-keyframes a_4_img_flash_move{
	0%,100%{opacity: 0;-ms-transform:scale(1);}
	50%{opacity: 1;-ms-transform:scale(1.1);}
}

@-o-keyframes a_4_img_flash_move{
	0%,100%{opacity: 0;-o-transform:scale(1);}
	50%{opacity: 1;-o-transform:scale(1.1);}
}

.a_1_p_1,
.a_2_p_1,
.a_3_p_1,
.a_4_p_1,
.a_5_p_1{
	-webkit-transition: all 1.2s;
	-moz-transition: all 1.2s;
	-ms-transition: all 1.2s;
	-o-transition: all 1.2s;
	transition: all 1.2s;
	opacity: 1;
	-webkit-transform: translateY(0);
	-moz-transform: translateY(0);
	-ms-transform: translateY(0);
	-o-transform: translateY(0);
	transform: translateY(0);
}

.a_1_p_2,
.a_2_p_2,
.a_3_p_2,
.a_4_p_2,
.a_5_p_2{
	-webkit-transition: all 1.2s 1.2s;
	-moz-transition: all 1.2s 1.2s;
	-ms-transition: all 1.2s 1.2s;
	-o-transition: all 1.2s 1.2s;
	transition: all 1.2s 1.2s;
	opacity: 1;
	-webkit-transform: translateY(0);
	-moz-transform: translateY(0);
	-ms-transform: translateY(0);
	-o-transform: translateY(0);
	transform: translateY(0);
}

.a_1_p_3,
.a_2_p_3,
.a_3_p_3,
.a_4_p_3,
.a_5_p_3{
	-webkit-transition: all 1.2s 2.4s;
	-moz-transition: all 1.2s 2.4s;
	-ms-transition: all 1.2s 2.4s;
	-o-transition: all 1.2s 2.4s;
	transition: all 1.2s 2.4s;
	opacity: 1;
	-webkit-transform: translateY(0);
	-moz-transform: translateY(0);
	-ms-transform: translateY(0);
	-o-transform: translateY(0);
	transform: translateY(0);
}

.a_2_p_4{
	-webkit-transition: all 1.2s 4.2s;
	-moz-transition: all 1.2s 4.2s;
	-ms-transition: all 1.2s 4.2s;
	-o-transition: all 1.2s 4.2s;
	transition: all 1.2s 4.2s;
	color: #ec6b46;
	font-weight: 600;
	opacity: 1;
	-webkit-transform: translateY(0);
	-moz-transform: translateY(0);
	-ms-transform: translateY(0);
	-o-transform: translateY(0);
	transform: translateY(0);
}

.a_1_p_4,
.a_3_p_4,
.a_4_p_4,
.a_5_p_4{
	-webkit-transition: all 1.2s 3.6s;
	-moz-transition: all 1.2s 3.6s;
	-ms-transition: all 1.2s 3.6s;
	-o-transition: all 1.2s 3.6s;
	transition: all 1.2s 3.6s;
	opacity: 1;
	-webkit-transform: translateY(0);
	-moz-transform: translateY(0);
	-ms-transform: translateY(0);
	-o-transform: translateY(0);
	transform: translateY(0);
}


.a_2_p_5{
	-webkit-transition: all 1.2s 5.2s;
	-moz-transition: all 1.2s 5.2s;
	-ms-transition: all 1.2s 5.2s;
	-o-transition: all 1.2s 5.2s;
	transition: all 1.2s 5.2s;
	opacity: 1;
	-webkit-transform: translateY(0);
	-moz-transform: translateY(0);
	-ms-transform: translateY(0);
	-o-transform: translateY(0);
	transform: translateY(0);
}

.a_1_p_5,
.a_3_p_5,
.a_4_p_5,
.a_5_p_5{
	-webkit-transition: all 1.2s 4.4s;
	-moz-transition: all 1.2s 4.4s;
	-ms-transition: all 1.2s 4.4s;
	-o-transition: all 1.2s 4.4s;
	transition: all 1.2s 4.4s;
	opacity: 1;
	-webkit-transform: translateY(0);
	-moz-transform: translateY(0);
	-ms-transform: translateY(0);
	-o-transform: translateY(0);
	transform: translateY(0);
}

.a_1_p_6,
.a_3_p_6,
.a_4_p_6,
.a_5_p_6{
	-webkit-transition: all 1.2s 5.2s;
	-moz-transition: all 1.2s 5.2s;
	-ms-transition: all 1.2s 5.2s;
	-o-transition: all 1.2s 5.2s;
	transition: all 1.2s 5.2s;
	opacity: 1;
	-webkit-transform: translateY(0);
	-moz-transform: translateY(0);
	-ms-transform: translateY(0);
	-o-transform: translateY(0);
	transform: translateY(0);
}

.a_4_p_6{
	color: #ec6b46;
	font-weight: 600;
}

.a_1_p_7,
.a_5_p_7{
	-webkit-transition: all 1.2s 6s;
	-moz-transition: all 1.2s 6s;
	-ms-transition: all 1.2s 6s;
	-o-transition: all 1.2s 6s;
	transition: all 1.2s 6s;
	opacity: 1;
	-webkit-transform: translateY(0);
	-moz-transform: translateY(0);
	-ms-transform: translateY(0);
	-o-transform: translateY(0);
	transform: translateY(0);
}

.a_1_p_8,
.a_5_p_8{
	-webkit-transition: all 1.2s 6.8s;
	-moz-transition: all 1.2s 6.8s;
	-ms-transition: all 1.2s 6.8s;
	-o-transition: all 1.2s 6.8s;
	transition: all 1.2s 6.8s;
	color: #ec6b46;
	font-weight: 600;
	opacity: 1;
	-webkit-transform: translateY(0);
	-moz-transform: translateY(0);
	-ms-transform: translateY(0);
	-o-transform: translateY(0);
	transform: translateY(0);
}



.view_off{
	width: 2.5rem;
	height: 2.5rem;
	background: url(../images/spite_80.png) no-repeat;
	background-color: #fafcfe;
	background-size: 100% auto;
	background-position: 0 -50rem;
	position: absolute;
	border-radius: 1.25rem;
	top: 1rem;
	right: 1rem;
	cursor: pointer;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-ms-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
	opacity: 0;
}

.view_off_move{
	opacity: 1;
}

.view_off:hover{
	background-color: #fed547;
}


/*閺囨潙顦挎担婊冩惂妞わ拷*/

.work_wrapper{
	background: #6ccbea;
	display: none;
}

.work_container{
	width: 60rem;
	height: auto;
	margin: 0 auto;
	padding-top: 12.5rem;
	padding-bottom: 0.5rem;
}

.work_box{
	width: 50rem;
	height: 25rem;
	background: #c3e5f0;
	border: 0.7rem solid #040000;
	border-radius: 1.5rem;
	margin: 0 auto 7.5rem;
	position: relative;
}

.work_title{
	width: 25rem;
	height: 6rem;
	border: 0.7rem solid #040000;
	border-radius: 1.5rem;
	position: absolute;
	top: -4.5rem;
	left: 50%;
	margin-left: -12.5rem;
	background: #fcd445;
	font-size: 2.4rem;
	line-height: 4.6rem;
	text-align: center;
	font-weight: 600;
	z-index: 100;
}

.icon_pen_1, .icon_pen_2{
	width: 12.5rem;
	height: 3.5rem;
	background: url(../images/spite_600.png) no-repeat;
	background-size: 100% auto;
	background-position: 0 -75rem;
	position: absolute;
	z-index: 80;
}

.icon_pen_1{
	top: -3.5rem;
	left: 60%;
}

.icon_pen_2{
	top: -3.5rem;
	left: 15%;
}

.work_pic{
	width: 30rem;
	height: 25rem;
	display: flex;
	align-items: center;
	justify-content: center;
	float: left;
}
.work_pic .imgClass{
	flex: 100%;
	height: 22rem;
	margin: 5px; 
	display: flex;
	align-items: center;
}
.work_pic .imgClass img{
	width: 100%;
	max-height: 100%;
	object-fit: cover;
}
.work_info{
	margin-top: 7.5rem;
	width: 17.5rem;
	height: auto;
	float: right;
}

.work_info_1{
	margin-top: 5rem;
}

.work_info h3{
	font-size: 1rem;
}

.jiuyang_code_img{
	width: 5rem;
	height: 5rem;
	margin: 0.5rem 3rem 1.5rem;
	background: url(../images/spite_200.png) no-repeat;
	background-size: 100% auto;
	background-position: 0 -15rem;
}

.zhuanpan_code_img{
	width: 5rem;
	height: 5rem;
	margin: 0.5rem 3rem 1.5rem;
	background: url(../images/spite_200.png) no-repeat;
	background-size: 100% auto;
	background-position: 0 -25rem;
}

.xueche_code_img{
	width: 5rem;
	height: 5rem;
	margin: 0.5rem 3rem 1.5rem;
	background: url(../images/spite_200.png) no-repeat;
	background-size: 100% auto;
	background-position: 0 -20rem;
}

.work_info a{
	display: block;
	text-decoration: none;
	font-size: 1rem;
	color: #666;
	margin-bottom: 1.5rem;
	font-weight: 600;
}

.work_info p{
	font-size: 0.8rem;
	line-height: 1.2rem;
}

.work_info p span{
	font-size: 1rem;
	line-height: 1.5rem;
	font-weight: 600;
	display: block;
}

.work_info a:hover, .work_info a:active{
	color: #ec6b46;
}

.work_pic_1 div{
	width: 25rem;
	height: 14.05rem;
	margin: 5rem auto 0;
	background: url(../images/spite_600.png) no-repeat;
	background-size: 100% auto;
	background-position: 0 -50rem;
}

.icon_ele{
	width: 5.65rem;
	height: 5.65rem;
	background: url(../images/spite_150.png) no-repeat;
	background-size: 100% auto;
	background-position: 0 -5.65rem;
	position: absolute;
	z-index: 80;
	top: -6.75rem;
	left: 7.5rem;
}

.icon_ankle{
	width: 1.5rem;
	height: 3rem;
	border-width: 1rem 0.75rem;
	border-style: solid;
	border-color: #040000 transparent transparent  transparent ;
	position: absolute;
	top: 1.5rem;
	left: 50%;
	margin-left: -0.75rem;
}

.work_pic_2 div,
.work_pic_3 div,
.work_pic_4 div{
	width: 30rem;
	height: 22.5rem;
	margin: 0 auto 0;
	
}

.work_pic_2 div{
	background: url(../images/spite_600.png) no-repeat;
	background-size: 100% auto;
	background-position: 0 -90rem;
}

.work_pic_3 div{
	background: url(../images/spite_600.png) no-repeat;
	background-size: 100% auto;
	background-position: 0 -120rem;
}

.work_pic_4 div{
	background: url(../images/spite_600.png) no-repeat;
	background-size: 100% auto;
	background-position: 0 -150rem;
}

.icon_circle_1,
.icon_circle_2{
	width: 6rem;
	height: 6rem;
	position: absolute;
	z-index: 80;
	top: -7.25rem;
	left: 7.75rem;
}

.icon_circle_1{
	background: url(../images/spite_150.png) no-repeat;
	background-size: 100% auto;
	background-position: 0 -12rem;
	-webkit-transform: scale(0.7);
	-moz-transform: scale(0.7);
	-ms-transform: scale(0.7);
	-o-transform: scale(0.7);
	transform: scale(0.7);
}

.icon_circle_2{
	background: url(../images/spite_150.png) no-repeat;
	background-size: 100% auto;
	background-position: 0 -18rem;
	-webkit-animation: icon_circle_2 3s linear infinite;
	-moz-animation: icon_circle_2 3s linear infinite;
	-ms-animation: icon_circle_2 3s linear infinite;
	-o-animation: icon_circle_2 3s linear infinite;
	animation: icon_circle_2 3s linear infinite;
}

@-webkit-keyframes icon_circle_2{
	0%{-webkit-transform:rotate(0);}
	100%{-webkit-transform:rotate(360deg);}
}

@-moz-keyframes icon_circle_2{
	0%{-moz-transform:rotate(0);}
	100%{-moz-transform:rotate(360deg);}
}

@-ms-keyframes icon_circle_2{
	0%{-ms-transform:rotate(0);}
	100%{-ms-transform:rotate(360deg);}
}

@-o-keyframes icon_circle_2{
	0%{-o-transform:rotate(0);}
	100%{-o-transform:rotate(360deg);}
}

@keyframes icon_circle_2{
	0%{transform:rotate(0);}
	100%{transform:rotate(360deg);}
}

.icon_huatong{
	width: 6.2rem;
	height: 6.2rem;
	background: url(../images/spite_150.png) no-repeat;
	background-size: 100% auto;
	background-position: 0 0;
	position: absolute;
	z-index: 80;
	top: -6.5rem;
	left: 37rem;
	-webkit-animation: icon_huatong 2s linear infinite;
	-moz-animation: icon_huatong 2s linear infinite;
	-ms-animation: icon_huatong 2s linear infinite;
	-o-animation: icon_huatong 2s linear infinite;
	animation: icon_huatong 2s linear infinite;
	-webkit-transform-origin: right bottom;
	-moz-transform-origin: right bottom;
	-ms-transform-origin: right bottom;
	-o-transform-origin: right bottom;
	transform-origin: right bottom;
}

@-webkit-keyframes icon_huatong{
	0%,50%,100%{-webkit-transform:rotate(0) translateY(0rem);}
	25%{-webkit-transform:rotate(-5deg) translateY(0.1rem);}
	75%{-webkit-transform:rotate(5deg) translateY(0.1rem);}
}

@-moz-keyframes icon_huatong{
	0%,50%,100%{-moz-transform:rotate(0) translateY(0rem);}
	25%{-moz-transform:rotate(-5deg) translateY(0.1rem);}
	75%{-moz-transform:rotate(5deg) translateY(0.1rem);}
}

@-ms-keyframes icon_huatong{
	0%,50%,100%{-ms-transform:rotate(0) translateY(0rem);}
	25%{-ms-transform:rotate(-5deg) translateY(0.1rem);}
	75%{-ms-transform:rotate(5deg) translateY(0.1rem);}
}

@-o-keyframes icon_huatong{
	0%,50%,100%{-o-transform:rotate(0) translateY(0rem);}
	25%{-o-transform:rotate(-5deg) translateY(0.1rem);}
	75%{-o-transform:rotate(5deg) translateY(0.1rem);}
}

@keyframes icon_huatong{
	0%,50%,100%{transform:rotate(0) translateY(0rem);}
	25%{transform:rotate(-5deg) translateY(0.1rem);}
	75%{transform:rotate(5deg) translateY(0.1rem);}
}


/*閸ュ搫鐣炬い鍫曞劥閺嶏拷*/
.work_header{
	width: 100%;
	height: 3rem;
	border-bottom: 0.15rem solid #040000;
	position: absolute;
	top: 99%;
	left: 0;
	background: #c3e5f0;
	z-index: 200;
	box-shadow: 0 0.25rem 0.25rem rgba(0,0,0,0.5);
	-webkit-transition: all 1s;
	-moz-transition: all 1s;
	-ms-transition: all 1s;
	-o-transition: all 1s;
	transition: all 1s;
	display: none;
}

.work_header_move{
	top: 0;
}

.work_header_now{
	width: 100%;
	height: 3rem;
	border-bottom: 0.15rem solid #040000;
	position: fixed;
	top: 0;
	left: 0;
	background: #c3e5f0;
	z-index: 200;
	box-shadow: 0 0.25rem 0.25rem rgba(0,0,0,0.5);
}

.work_header_inner{
	width: 60rem;
	height: 100%;
	position: relative;
	margin: 0 auto;
}

.back_btn{
	width: 7.5rem;
	height: 1.5rem;
	font-size: 1rem;
	line-height: 1.2rem;
	text-align: center;
	font-weight: 600;
	background: #c3e5f0;
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -3.75rem;
	border: 0.15rem solid #040000;
	border-top-color: #c3e5f0;
	border-top:  none;
	box-shadow: 0 0.25rem 0.25rem rgba(0,0,0,0.5);
	border-radius: 0 0 0.5rem 0.5rem;
	cursor: pointer;
}

.header_pic{
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	float: left;
	margin: 0.1rem 0 0 1rem;
}

.header_pic .header_pic_img{
	display: block;
	width: 100%;
	height: 100%;
	background: #ec6b46;
	border: 0.15rem solid #040000;
	border-radius: 50%;
	-webkit-animation: header_pic 1s infinite;
	-moz-animation: header_pic 1s infinite;
	-ms-animation: header_pic 1s infinite;
	-o-animation: header_pic 1s infinite;
	animation: header_pic 1s infinite;
	background: url(../images/spite_200.png) no-repeat;
	background-size: 100% auto;
	background-position: 0 -2.25rem;
}

@-webkit-keyframes header_pic{
	0%{-webkit-transform:scale(1);}
	50%{-webkit-transform:scale(1.08);}
	100%{-webkit-transform:scale(1);}
}

@-moz-keyframes header_pic{
	0%{-moz-transform:scale(1);}
	50%{-moz-transform:scale(1.08);}
	100%{-moz-transform:scale(1);}
}

@-ms-keyframes header_pic{
	0%{-ms-transform:scale(1);}
	50%{-ms-transform:scale(1.08);}
	100%{-ms-transform:scale(1);}
}

@-o-keyframes header_pic{
	0%{-o-transform:scale(1);}
	50%{-o-transform:scale(1.08);}
	100%{-o-transform:scale(1);}
}

@keyframes header_pic{
	0%{transform:scale(1);}
	50%{transform:scale(1.08);}
	100%{transform:scale(1);}
}

.header_name{
	float: left;
	overflow: hidden;
	width: 20rem;
	height: 2.7rem;
	font-size: 1.2rem;
	line-height: 2.7rem;
	text-indent: 0.75rem;
}



.header_pic:hover ~ .header_name{
	width: 17.5rem;
	-webkit-transition: all 1s;
	-moz-transition: all 1s;
	-ms-transition: all 1s;
	-o-transition: all 1s;
	transition: all 1s;
}

.header_qq{
	float: right;
	width: 10rem;
	height: 2.7rem;
	font-size: 0.9rem;
	line-height: 2.7rem;
	text-indent: 0.75rem;
	font-weight: 600;
	vertical-align: middle;
	
}

.header_qq span{
	display: inline-block;
	width: 1.5rem;
	height: 1.5rem;
	background: url(../images/spite_80.png) no-repeat;
	background-size: 100% auto;
	background-position: 0 -21rem;
	vertical-align: middle;
	margin-right: 0.5rem;
}

.header_mail{
	float: right;
	width: 13.5rem;
	height: 2.7rem;
	font-size: 0.9rem;
	line-height: 2.7rem;
	text-indent: 0.75rem;
	font-weight: 600;
	vertical-align: middle;
}

.header_mail span{
	display: inline-block;
	width: 1.5rem;
	height: 1.5rem;
	background: url(../images/spite_80.png) no-repeat;
	background-size: 100% auto;
	background-position: 0 -22.5rem;
	vertical-align: middle;
	margin-right: 0.5rem;
}

/*閸ョ偛鍩屾い鍫曞劥*/
.gototop{
	width: 4rem;
	height: 4.6rem;
	position: fixed;
	right: 5rem;
	bottom: 5rem;
	line-height: 1rem;
	font-size: 0.6rem;
	line-height: 0.6rem;
	text-align: center;
	cursor: pointer;
	display: none;
	z-index: 100;
}
.gototop>.bow{
	width: 4rem;
	height: 4rem;
	background: url(../images/arrow_1.png) no-repeat;
	background-size: 100% 100%;
	-webkit-transition: all 0.5s 0.1s;
	-moz-transition: all 0.5s 0.1s;
	-ms-transition: all 0.5s 0.1s;
	-o-transition: all 0.5s 0.1s;
	transition: all 0.5s 0.1s;
}
.gototop>.arrow{
	width: 3rem;
	height: 0.75rem;
	position: absolute;
	right: 0.5rem;
	bottom: 1.1rem;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-ms-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
	background: url(../images/spite_80.png) no-repeat;
	background-size: 100% auto;
	background-position: 0 -63rem;
}
.gototop:hover>.bow{
	background: url(../images/arrow_3.png) no-repeat;
	background-size: 100% 100%;
}
.gototop:hover>.arrow{
	-webkit-transform: rotate(90deg) translateX(-1.1rem);
	-moz-transform: rotate(90deg) translateX(-1.1rem);
	-ms-transform: rotate(90deg) translateX(-1.1rem);
	-o-transform: rotate(90deg) translateX(-1.1rem);
	transform: rotate(90deg) translateX(-1.1rem);
}
.gototop_on{
	width: 4rem;
	height: 4.6rem;
	position: fixed;
	right: 5rem;
	bottom: 5rem;
	line-height: 1rem;
	font-size: 0.6rem;
	line-height: 0.6rem;
	text-align: center;
	cursor: pointer;
	z-index: 90;
	display: none;
}
.gototop_on>.bow{
	width: 4rem;
	height: 4rem;
	background: url(../images/arrow_3.png) no-repeat;
	background-size: 100% 100%;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-ms-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
}
.gototop_on>.arrow{
	width: 3rem;
	height: 0.75rem;
	position: absolute;
	right: 0.5rem;
	bottom: 1.1rem;
	-webkit-transform: rotate(90deg) translateX(-1.1rem);
	-moz-transform: rotate(90deg) translateX(-1.1rem);
	-ms-transform: rotate(90deg) translateX(-1.1rem);
	-o-transform: rotate(90deg) translateX(-1.1rem);
	transform: rotate(90deg) translateX(-1.1rem);
	background: url(../images/spite_80.png) no-repeat;
	background-size: 100% auto;
	background-position: 0 -63rem;
}
.gototop_on>.arrow_move{
	-webkit-transform: rotate(90deg) translateX(-25rem);
	-moz-transform: rotate(90deg) translateX(-25rem);
	-ms-transform: rotate(90deg) translateX(-25rem);
	-o-transform: rotate(90deg) translateX(-25rem);
	transform: rotate(90deg) translateX(-25rem);
	-webkit-transition: all 1s;
	-moz-transition: all 1s;
	-ms-transition: all 1s;
	-o-transition: all 1s;
	transition: all 1s;
}


@media screen and (max-width: 1023px){
    html {
        font-size: 10px;
        -webkit-text-size-adjust: none;
    }
    .container{
      width: 100%;
      margin: 0 auto;
      height: 100%;
      padding-top: 0rem !important;
      overflow: hidden;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
    }
    .tv_wrapper{
      transform: scale(0.65);
      width: 46rem;
      height: 34.5rem;
      background: #989fa1;
      border: 0.7rem solid #040000;
      border-radius: 1.5rem;
      position: relative;
      /* float: left; */
    }
    .tv_inner{
      height: 30rem;
      margin: 1rem 0.5rem 1rem 1rem;
    }
    .my_icon_box{
      height: 26rem;
      width: 34rem;
      display: flex;
      align-items: center;
      justify-content: space-around;
      flex-wrap: wrap;
    }
    .my_icon_box .my_icon_item{
      float: none;
      width: 6rem;
      height: 6rem;
      margin: 0rem 5rem 2.5rem 5rem;
    }
    .icon_school{
      background-position: 0 -12rem;
    }
    .icon_grade{
      background-position: 0 -18rem;
    }
    .icon_location{
      background-position: 0 -24rem;
    }
    .icon_job{
      background-position: 0 -30rem;
    }
    .tv_btn{
      margin: 10rem 0 0 0.25rem;
    }
    .control_wrapper{
      width: 12rem;
      height: 27.5rem;
      background: #d9dbdc;
      border: 0.7rem solid #040000;
      border-radius: 1.5rem;
      margin-top: -5rem;
    }
    .my_name_box{
      font-size: 1.5rem;
      width: 12rem;
      margin-left: -6rem;
    }
    .my_name_box_move{
      left: 5.5rem;
    }
    .my_skill_cont{
      padding-top: 4rem;
      padding-left: 6rem;
      transform: scale(1.5);
    }
    .tap_1,.tap_2,.tap_3,.tap_4{
      transform: scale(1.2);
    }
    .tap_1{
      top: 17.5rem;
      left: 6rem;
    }
    .tap_2{
      top: 17.5rem;
      left: 23rem;
    }
    .tap_1_move,.tap_2_move,.tap_3_move,.tap_4_move{
      display: none;
    }
    .tap_3{
      top: 26.5rem;
      left: 6rem;
      
    }
    .tap_4{
      top: 26.5rem;
      left: 23rem;
    }
    .my_download{
      top: 1rem;
      width: 10rem;
      left: 2rem;
    }
    .header_name{
      display: none;
    }
    .work_header_inner{
      width: 100%;
      height: 100%;
      position: relative;
      margin: 0 auto;
    }
    .work_container{
      width: 100%;
    }
    .work_box{
      width: 100%;
      height: auto;
    }
    .work_info{
      float: none;
      margin: 0 2rem 1rem 2rem;
    }
    .work_pic{
      float: none;
      width: 100%;
      height: auto;
    }
    .gototop p{
      line-height: 1.5rem;
    }
    .control_ul{
      width: 11rem;
    }
    .control_cats {
      width: 4.5rem;
    }
    .tv_blank{
      height: 30rem;
    }
    .my_exp_box_item{
      line-height: 1.5rem;
    }
    
    .my_pic_work{
      left: 30%;
    }
    .my_pic_work_move{
      top: 20%;
      left: 0%;
    }
    .q_list{
      top: 20%;
    }
    .q_list_move{
      top: 20%;
    }
    .my_a_box{
      right:auto;
      left: 10%;
    }
    .my_a_box_move{
      top:80%;
      margin-top: -10rem;
      left:10px;
      margin-right: 0;
    }
    .welcome_work{
      left:30%;
    }
    
}


@media screen and (min-width:1024px) and (max-width: 1500px){
    html {
        font-size: 16px;
        -webkit-text-size-adjust: none;
    }
    .contact_box i{
		display: none;
	}
}

@media screen and (min-width:1501px) and (max-width: 2000px){
    html {
        font-size: 20px;
        -webkit-text-size-adjust: none;
    }
}

@media screen and (min-width:2001px){
    html {
        font-size: 30px;
        -webkit-text-size-adjust: none;
    }
}


